<template>
  <div class="authority-container">
    <div class="head">
      <el-input size="mini" v-model="param.keyword" clearable placeholder="输入姓名搜索" class="custom-input" @keyup.enter="loadAuthorityList">
        <template #append>
          <el-button size="mini" class="custom-btn" icon="el-icon-search" @click="loadAuthorityList">搜索</el-button>
        </template>
      </el-input>
    </div>
    <el-table row-key="id" :data="authorityList" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" size="small">
      <el-table-column prop="alias" label="别名" sortable width="180"></el-table-column>
      <el-table-column prop="name" label="名称" sortable width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建日期"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import {ref} from "vue"
import {getAuthorityList} from "../../../api/auth/authority"
export default {
  setup() {
    const param = ref({keyword: ""})
    let authorityList = ref([])
    const loadAuthorityList = () => {
      console.log("ssss")
      getAuthorityList(param.value, (res) => {
        console.log(res)
        authorityList.value = res.list
      })
    }
    loadAuthorityList()
    return {
      param,
      authorityList,
      expand: true,
      loadAuthorityList
    }
  }
}
</script>

<style scoped lang="scss">
  .authority-container {
    padding: 20px;
    .head {
      margin-bottom: 10px;
      .custom-input {
        width: 50%;
        min-width: 200px;
        max-width: 400px;
      }
      .custom-btn {
        &:hover {
          color: #415fff;
        }
      }
    }
  }
</style>
